//@import "constants";
//@import "init";
@import "../common/header";
@import "../common/footer";

body {
  background: #F2F2F2;
}

//.header {
//  width: 100%;
//  height: 64px;
//  background: #3a3a3a;
//  position: fixed;
//  left: 0;
//  top: 0;
//  right: 0;
//
//  .container {
//    width: $pageWidth;
//    height: 100%;
//    margin: 0 auto;
//
//    .logo-box {
//      width: 140px;
//      height: 49px;
//      background: url("http://www.xfz.cn/static/build/images/logo.png") no-repeat;
//      margin-top: 8px;
//      float: left;
//    }
//
//    .nav {
//      margin-left: 128px;
//      float: left;
//
//      li {
//        float: left;
//        margin-right: 40px;
//        line-height: 64px;
//        a {
//          color: #fff;
//        }
//        //&.active {
//        //  border-bottom: 5px solid #5c87d9;
//        //}
//      }
//    }
//
//    .auth-box {
//      float: right;
//      line-height: 64px;
//      color: #fff;
//      font-size: 14px;
//      .iconfont {
//        color: #fff;
//        font-size: 14px;
//      }
//      a {
//        color: #fff;
//      }
//    }
//  }
//}

.main {
  width: 100%;
  margin-top: 84px;
  .wrapper {
    width: $pageWidth;
    margin: 0 auto;
    overflow: hidden;
    .main-content-wrapper {
      float: left;
      width: $mainBoxWidth;
      height: 500px;
      background: #fff;
      .banner-group {
        width: 100%;
        height: $bannerHeight;
        background: #0e275e;
        position: relative;
        overflow: hidden;
        z-index: 0;

        .banner-ul {
          overflow: hidden;
          width: $bannerWidth*4;
          position: absolute;
          left: 0;

          li {
            float: left;
            width: $bannerWidth;
            height: $bannerHeight;

            img {
              width: $bannerWidth;
              height: $bannerHeight;
            }
          }
        }

        .arrow {
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 70px;
          color: #fff;
          position: absolute;
          top: 50%;
          margin-top: -45px;
          cursor: pointer;
          display: none;
        }

        .left-arrow {
          left: 20px;
        }

        .right-arrow {
          right: 20px;
        }

        .page-control-group {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 20px;

          .page-control {
            margin: 0 auto;
            overflow: hidden;

            li {
              width: 12px;
              height: 12px;
              border: 1px solid #fff;
              border-radius: 50%;
              float: left;
              margin: 0 8px;
              box-sizing: border-box;
              cursor: pointer;

              &.active {
                background: #fff;
              }
            }
          }
        }
      }
      .list-outer-group {
        background: #fff;
        .list-tab {
          width: 100%;
          height: 66px;
          border: 1px solid $themeColor;
          border-left: none;
          border-right: none;
          li {
            float: left;
            padding: 0 10px;
            margin-top: 20px;
            a {
              color: #878787;
            }
            &:first-of-type {
              border: 5px none #5c87d9;
              border-left-style: solid;
            }
            &.active {
              a {
                color: #212121;
              }
            }
          }
        }
      }
      .list-inner-group {
        li {
          padding: 20px;
          border-bottom: 1px solid #eee;
          overflow: hidden;
          .thumbnail-group {
            float: left;
            width: 226px;
            height: 162px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .news-group {
            float: right;
            width: 504px;
            height: 162px;
            position: relative;
            .title {
              color: #212121;
              font-size: 22px;
              a {
                color: #212121;
                &:hover {
                  color: $themeColor;
                }
              }
            }
            .content {
              color: #878787;
              font-size: 14px;
              margin-top: 10px;
            }
            .more {
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              font-size: 14px;
              .category {
                color: $themeColor;
              }
              .pub-time {
                float: right;
                margin-left: 20px;
              }
              .author {
                float: right;
              }
            }
          }
        }
      }

      .load-more-group {
        padding: 20px 0;
        text-align: center;
        .load-more {
          width: 402px;
          height: 40px;
          background: #d2dcea;
          color: #6d85ac;
          border: none;
          outline: none;
          cursor: pointer;
        }
      }
    }
  }

}

.main {
  .wrapper {
    .sidebar-wrapper {
      float: right;
      width: $sidebarWidth;
      background: #fff;
      .title-group {
        padding: 20px;
        overflow: hidden;
        .title {
          float: left;
          font-size: 18px;
          color: #212121;
        }
        .more {
          float: right;
          font-size: 14px;
          color: $themeColor;
        }
      }
      .advertise-group {
        img {
          width: 100%;
        }
      }
      .platform-group .focus-group {
        padding: 0 20px;
        overflow: hidden;
        .left-group {
          float: left;
          width: 190px;
          li {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: url("https://www.xfz.cn/static/build/images/side-icon.png") no-repeat;
            background-size: 26%;
            margin-bottom: 20px;
            overflow: hidden;
            a {
              float: left;
              margin-left: 64px;
              color: #878787;
              font-size: 14px;
            }
          }
          .zhihu {
            background-position: 0 0;
          }
          .weibo {
            background-position: 0 -63px;
          }
          .toutiao {
            background-position: 0 -122px;
          }

        }
        .right-group {
          float: right;
          width: 100px;
          background: url("https://www.xfz.cn/static/build/images/wxQr.jpg") no-repeat;
          background-size: 100%;

          .desc {
            margin-top: 100px;
            color: #878787;
            font-size: 12px;
          }
        }
      }

      .hot-news-group {
        .hot-list-group {
          li {
            padding: 0 20px 20px;
            overflow: hidden;
            border-bottom: 1px solid $lineColor;
            .left-group {
              float: left;
              width: 204px;
              height: 72px;
              position: relative;
              .title {
                font-size: 16px;
                a {
                  color: $mainFontColor;
                  &:hover {
                    color: $themeColor;
                  }
                }
              }
              .more {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                font-size: 12px;
                .category {
                  float: left;
                  color: $themeColor;
                }
                .pub-time {
                  float: right;
                }
              }
            }
            .right-group {
              float: right;
              width: 102px;
              height: 72px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}

//.footer {
//  font-size: 14px;
//  color: #c9c9c9;
//  padding-top: 20px;
//  .top-group {
//    background: #555e67;
//    height: 100px;
//    padding-top: 26px;
//    box-sizing: border-box;
//
//    .top-inner-group {
//      width: $pageWidth;
//      margin: 0 auto;
//      //overflow: hidden;
//      position: relative;
//
//      .logo-box {
//        width: 168px;
//        height: 54px;
//        float: left;
//        background: url("http://xfz.cn/static/build/images/foot-logo.png") no-repeat;
//        background-size: 100%;
//      }
//      .detail-group {
//        float: left;
//        margin-left: 84px;
//
//        .line1 {
//          overflow: hidden;
//          .links {
//            float: left;
//            overflow: hidden;
//            li {
//              float: left;
//              padding: 0 10px;
//              a {
//                color: #c9c9c9;
//              }
//              &:first-of-type {
//                padding-left: 0;
//              }
//              &:last-of-type {
//                border-right: none;
//              }
//              border-right: 1px solid #c9c9c9;
//            }
//          }
//          .about-us {
//            float: left;
//            margin-left: 40px;
//            .title {
//              float: left;
//            }
//
//            .social-group {
//              float: left;
//              overflow: hidden;
//              li {
//                float: left;
//                color: #fff;
//                .text {
//                  margin-left: 24px;
//                }
//              }
//              .weixin {
//                background: url("https://www.xfz.cn/static/build/images/wx-icon.png") no-repeat;
//                background-size: 30%;
//                cursor: pointer;
//                &:hover .wx-qrcode {
//                  display: block;
//                }
//                .wx-qrcode {
//                  width: 204px;
//                  height: 204px;
//                  background: url("https://www.xfz.cn/static/build/images/wxQr.jpg");
//                  background-size: 100%;
//                  position: absolute;
//                  right: 360px;
//                  top: -220px;
//                  display: none;
//                }
//              }
//              .weibo {
//                margin-left: 20px;
//                background: url("https://www.xfz.cn/static/build/images/xl-icon.png") no-repeat;
//                background-size: 18%;
//                a {
//                  color: #fff;
//                }
//              }
//            }
//          }
//        }
//
//        .line2 {
//          overflow: hidden;
//          margin-top: 20px;
//          .address {
//            float: left;
//          }
//          .contact {
//            float: left;
//            margin-left: 40px;
//          }
//        }
//      }
//    }
//  }
//
//  .bottom-group {
//    background: #383e44;
//    height: 60px;
//    text-align: center;
//    line-height: 60px;
//  }
//}